
<template>
  <div class="search_car_box">
    <topHeader>
      <div slot="left">
        <img src="./../../assets/img/return.png" alt="" @click="goIndex">
      </div>
      <div class="hot_line_moudle" slot="center">
        <div>{{ this.startCtiy }}</div>
        <div><i class="iconfont icon-chufadaodaxiao"></i></div>
        <div>{{ this.endCtiy }}</div>
      </div>
      <!-- <div slot="right">
        <img src="./../../assets/img/shaixuan.png" alt="" width="20">
      </div> -->
    </topHeader>
    <div class="search_car_con">
      <div class="car_info" v-if="routeList.length > 0" v-for="(item, index) of routeList" :key="item.id">
        <div class="car_info_t">
          <div class="left">
            <div>
              <img src="./../../assets/img/clock.png" alt="">
            </div>
            <div>{{ item.outtime }}</div>
          </div>
          <div class="right">
            <div>
            <img src="./../../assets/img/people.png" alt="">
            </div>
            <div>余座：{{ item.freeSeat }}</div>
          </div>
        </div>
        <div class="car_box">
          <div class="icon">
            <img src="./../../assets/img/car.png" alt="">
          </div>
          <div class="title">
            品牌车型
          </div>
          <div class="input_box">
            {{ item.motorType }}
          </div>
        </div>
        <div class="route_box">
          <div class="icon">
            <img src="./../../assets/img/route.png" alt="">
          </div>
          <div class="title">
            行驶路线
          </div>
          <div class="input_box">
            <p>{{ item.roadline }}</p>
          </div>
        </div>
        <div class="route_box">
          <div class="icon">
            <img src="./../../assets/img/note.png" alt="">
          </div>
          <div class="title">
            备注
          </div>
          <div class="input_box">
            <p>{{ item.remark }}</p>
          </div>
        </div>
        <div class="price">
          <span>{{ item.cost }}元</span>&nbsp;/座
        </div>
        <div class="car_info_bottom">
          <div class="car_info_bottom_l">
            <div class="user_icon"><img src="./../../assets/img/user_icon.png" alt=""></div>
            <div class="name">{{ item.name.split('')[0] }}师傅</div>
            <div class="icon">
              <div>
                <img src="./../../assets/img/peopleshi.png" alt="">
              </div>
              <div>
                <img src="./../../assets/img/carshi.png" alt="">
              </div>
            </div>
          </div>
          <div class="cat_info_bottom_r">
            <div class="order_btn" @click="doOrder(item.freeSeat,item.id, item.userId)">
              预定
            </div>
          </div>
        </div>
      </div>
      <div v-if="routeList.length === 0" style="font-size:20px;text-align:center;line-height:600px;">
        暂无查询信息
      </div>
    </div>
    <div class="no_car_box" v-if='!nocarOrderInfo'>
      <div>
        没有合适的车辆？
      </div>
      <div class="no_order_btn" @click="noCarOrder">马上预约</div>
    </div>
    <popup v-model="orderShow" position="right" width="100%" height="100%">
      <div class="order_box">
        <topHeader>
          <div slot="center">
            <span>预定座位</span>
          </div>
          <div class="close" slot="right" @click="cancleOrder">
            &times;
          </div>
        </topHeader>
        <div class="order_con">
          <div class="car_box">
            <div class="icon">
              <img src="./../../assets/img/shouji.png" alt="">
            </div>
            <div class="title">
              手机号码
            </div>
            <div class="input_box">
              <input type="text" v-model="userPhone" readonly>
            </div>
            <div class="uptel" @click="updateTel">
              修改手机号
            </div>
          </div>
          <div class="car_box">
            <div class="icon">
              <img src="./../../assets/img/people_1.png" alt="">
            </div>
            <div class="title">
               预约人数
            </div>
            <div class="input_box_num">
              <popup-picker
              :placeholder="'人数'"
              :data="orderPeopleList"
              v-model="peopleNum"
              @on-show="onShow"
              @on-hide="onHide"
              @on-change="onChange">
              </popup-picker>
            </div>
            <div class="uptel_1">
            </div>
          </div>
          <div class="not_box">
            <div class="icon">
              <img src="./../../assets/img/dingwei.png" alt="">
            </div>
            <div class="title">
              上车留言
            </div>
            <div class="input_box">
              <input type="text" placeholder="例：人民路建设路口" v-model="orderParam.start">
            </div>
          </div>
          <div class="user_laws">
            <div class="user_laws_l">
                <input class="aui-radio" type="checkbox" name="demo1" value="1" v-model="agree" >我已阅读并同意人人同行顺风车
                <span class="user_laws_r" @click="OpenAbout">用户协议</span>
            </div>
          </div>
          <div class="summit_btn" @click="sumit">
            立即预定
          </div>
        </div>
      </div>
    </popup>
    <!-- <popup v-model="waitOrder" position="left" width="100%" height="100%">
      
    </popup> -->
  </div>
</template>

<script>
import { loadRouteList, loadUserPhone, Reserve, userIdAuthority, unpayInsert, nocarOrderInfo } from '@/api/allapis'
import Lockr from 'Lockr'
import topHeader from './../../components/topHeader'
import { Popup, PopupPicker, Datetime, Toast } from 'vux'
export default {
  data () {
    return {
      orderShow: false,
      // waitOrder: false,
      agree: false,
      orderSuccess: false,
      seat: null,
      orderPeopleList: [],
      list2: [['2个小时', '2个小时', '12个小时', '2个小时', '2个小时', '2个小时', '2个小时']],
      peopleNum: [],
      waitTime: [],
      value5: '',
      routeList: [],
      startCtiy: '郑州',
      endCtiy: '濮阳',
      userPhone: '',
      czUerid: null,
      orderParam: {
        userId: '',
        id: '',
        startPoint: '',
        endPoint: '',
        phone: '',
        start: '',
        num: ''
      },
      nocarOrderInfo: null
    }
  },

  components: {
    topHeader,
    Popup,
    PopupPicker,
    Datetime,
    Toast
  },

  computed: {
    userInfo () {
      return this.$store.state.user.uerInfo
    }
  },

  mounted () {
    this.loadRouteList()
    this.loadUserPhone()
    this.loadNocarInfo()
    console.log(this.$store.state.user)
  },

  methods: {
    loadNocarInfo () {
      nocarOrderInfo({ userId: this.$store.state.user.uerInfo.id }).then(res => {
        this.nocarOrderInfo = res.data
        console.log(this.nocarOrderInfo)
      })
    },
    loadRouteList () {
      this.startCtiy = this.$route.query.start
      this.endCtiy = this.$route.query.end
      loadRouteList({ start: this.startCtiy, end: this.endCtiy }).then(res => {
        if(res.code === 200) {
          if (res.data) {
            this.routeList = res.data
          }
        }
      })
    },
    loadUserPhone () {
      loadUserPhone({ userId: this.userInfo.id }).then(res => {
        this.userPhone = res.data
      })
    },
    goIndex () {
      this.$router.push({ name: 'index' })
    },
    doOrder (seat, id, czUerid) {
      if (Lockr.get('vertify')) {
        if (seat > 0) {
          // userIdAuthority({ userID: this.$store.state.user.uerInfo.id }).then(res => {
          //   if (res.data === '身份证已认证') {
          //     // alert('请先去认证身份证')
          //     this.$vux.alert.show({
          //       title: '人人同行提示',
          //       content: '请先认证身份证',
          //       buttonText: '好的',
          //       hideOnBlur: true,
          //       maskZIndex: 100
          //     })
          //     this.$router.push({ name: 'userconfirm' })
          //   } else {
          this.czUerid = czUerid
          this.seat = seat
          this.orderPeopleList = []
          let seatRange = []
          for (let i = 1; i <= seat; i++) {
            seatRange.push(i)
          }
          this.orderPeopleList.push(seatRange)
          this.orderShow = true
          this.orderParam.userId = this.$store.state.user.uerInfo.id
          this.orderParam.id = id
          this.orderParam.startPoint = this.$route.query.start
          this.orderParam.endPoint = this.$route.query.end
          this.orderParam.phone = this.userPhone
          //   }
          // })
        } else {
          this.$vux.alert.show({
            title: '人人同行提示',
            content: '已无空闲座位',
            buttonText: '好的',
            hideOnBlur: true,
            maskZIndex: 100
          })
        }
      } else {
        this.$vux.alert.show({
          title: '人人同行提示',
          content: '请先绑定手机号',
          buttonText: '好的',
          hideOnBlur: true,
          maskZIndex: 100
        })
        this.$router.push({name: 'telband'})
      }
    },
    cancleOrder () {
      this.peopleNum = []
      this.orderParam.num = ''
      this.orderParam.start = ''
      this.agree = false
      this.orderShow = false
    },
    async sumit () {
      if (this.agree) {
        if (this.orderParam.num === '') {
          // alert('请选择预约人数')
          this.$vux.alert.show({
            title: '人人同行提示',
            content: '请选择预约人数',
            buttonText: '好的',
            hideOnBlur: true,
            maskZIndex: 100
          })
        } else {
          Reserve(this.orderParam).then(res => {
            // alert(res.data)
            this.$vux.alert.show({
              title: '人人同行提示',
              content: res.data,
              buttonText: '好的',
              hideOnBlur: true,
              maskZIndex: 100
            })
            if (res.data === '预定成功') {
              unpayInsert({id: this.orderParam.id, number: this.orderParam.num, czid: this.czUerid}).then(res => {
                console.log(res.data)
              })
            }
            this.peopleNum = []
            this.orderShow = false
            this.orderParam.num = ''
            this.orderParam.start = ''
            this.agree = false
          })
        }
      } else {
        this.$vux.alert.show({
          title: '人人同行提示',
          content: '请同意人人顺风车协议',
          buttonText: '好的',
          hideOnBlur: true,
          maskZIndex: 100
        })
        // alert('请同意人人顺风车协议')
      }
    },
    onShow () {},
    onHide () {},
    onChange (val) {
      this.peopleNum = val
      this.orderParam.num = val.join('')
    },
    OpenAbout () {
      this.$router.push({ name: 'article' })
    },
    noCarOrder () {
      this.$router.push({ name: 'nocarorder' })
      // this.waitOrder = true
      // this.orderSuccess = false
    },
    // closeWaitOrder () {
    //   this.waitOrder = false
    //   console.log(this.waitOrder)
    // },
    // changeTime () {},
    // sumitOrder () {
    //   this.orderSuccess = true
    //   this.waitOrder = false
    // },
    updateTel () {
      this.$router.push({ name: 'updatetel' })
    },
    onToastHide () {}
  }
}

</script>
<style lang='less' scoped>
@import url('./search.less');
</style>